<template>
	<view class="pay-content">
		<view class="status-1" v-if="status == 1">
			<u-loading size="100" mode="flower" :show="status===1"></u-loading>
			<view>正在查询支付结果...</view>
		</view>
		<view class="main" v-if="status == 2">
			<view class="top flex-column">
				<image class="zficon T20" src="@/static/z07.png" mode=""></image>
				<text class="F40  fontbold">支付成功</text>
				<botton class="btn T20 flex-center" @click="orderGoods">查看订单</botton>
			</view>
		</view>
	</view>
</template>

<script>
	var timer = null;
	var num = 0;


	export default {

		data() {
			return {
				status: 1, //1查询中 2支付成功 3支付失败
				orderNo:null
			}
		},
		//页面卸载
		onUnload() {
			clearInterval(timer)
			num = 0
		},
		async onLoad(e) {
			let _this = this
			_this.orderNo = e.orderNo
			console.log(_this.orderNo,'这里是支付查询');
			timer = await setInterval(async () => {
				_this.status = 2
			}, 5000)
		},
		methods: {
			//查看订单
			orderGoods() {
				uni.redirectTo({
					url: '/pages/orderDetail/index?orderNo=' + this.orderNo
				})
			},
		}
	}
</script>
<style>
	page {

		font-size: 30rpx;
	}
</style>
<style lang="scss">
	.F40 {
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}

	.flex-column {
		padding-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pay-content {
		height: 100vh;
		background-color: #fff;
	}

	.status-1 {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
		// justify-content: center;
	}

	.main {
		padding: 30rpx;

		.box {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx;
		}

		.btn {
			border: 1px solid #a5a5a3;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.zficon {
			margin-left: 20rpx;
			width: 200rpx;
			height: 200rpx;
		}

		.QrCode {
			border-top: 1px dashed #a5a5a3;



			image {
				width: 420rpx;
				height: 420rpx;
			}

		}
	}
</style>